import React from "react";
import {Avatar, Button, Form, message, Modal} from "antd"
import {ProFormSelect, ProFormText} from "@ant-design/pro-components";


interface Props {
    modalVisible: boolean;
    // 视频数据
    data: UserType.User;
    onClose: () => void;
}



/**
 * 展示用户信息
 * @param props
 * @constructor
 */
const UserInfoModal: React.FC<Props> = (props) => {
    const {modalVisible, data, onClose} = props

    return (
        <Modal
            title={ <div> <Avatar src={<img src={data.userAvatar} alt="avatar" />} /></div>}
            visible={modalVisible}
            onCancel={onClose}
            footer={null}
        >
            <Form<UserType.User>
                onFinish={onClose}
                initialValues={
                    {
                        userName:data.userName,
                        userAccount:data.userAccount,
                        gender:data.gender
                    }
                }
            >
                <ProFormText
                    label="账号"
                    name="userAccount"
                />
                <ProFormText
                    label="姓名"
                    name="userName"
                />
                <ProFormSelect
                    label="性别"
                    name="gender"
                    request={async () => [
                        { label: '男', value: 0 },
                        { label: '女', value: 1 },
                    ]}
                />
                <Form.Item >
                    <Button type="primary" htmlType="submit">
                        返回
                    </Button>
                </Form.Item>
            </Form>

        </Modal>
    )
}
export default UserInfoModal;